<template>
    <div class="main">
        <div class="student_search">
            <el-form :inline="true">
              <el-form-item label="Student Name:">
                <el-input v-model="student_search_name" placeholder="Student Name"></el-input>
              </el-form-item>
              <el-form-item label="Student UID:">        
                <el-input v-model="student_search_uid" placeholder="Student UID"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" v-on:click="btn_student_search">
                  Search
                </el-button>
              </el-form-item>
            </el-form>
        </div>
        <div class="student_table">
            <el-table :data="student_table_data" @row-click="student_details" height="600" width="600" style="width: 100%">
                <el-table-column width="100" prop="no" label="ID"></el-table-column>
                <el-table-column prop="uid" label="UID"></el-table-column>
                <el-table-column prop="userName" label="Student Name"></el-table-column>
                <el-table-column  width="200" label="Action">
                    <el-button type="primary" v-on:click="btn_student_remove">
                    Remove
                    </el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="student_add">
            <el-form :inline="true">
                 <el-form-item label="Student UID:">
                <el-input v-model="student_add_uid" placeholder="New Student UID" @blur="input_studentUidValid"></el-input>
              </el-form-item>
               <el-form-item>
                 <el-button type="primary" v-on:click="btn_student_add">Add student</el-button>
              </el-form-item>
              <el-form-item>
                <span style="color: red; display: none" id="uidSpan">Student UID Not available</span>
               </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    props:['class_modify_id']
    ,
    data() {
        return {
            student_table_data:[],
            student_search_name:"",
            student_search_uid:"",
            student_add_uid:null,
            student_remove_uid:null,
        }
    },
    methods: {
        student_details(row){
            this.student_remove_uid = row.uid;
        },
        btn_student_add(){
            let user = JSON.parse(sessionStorage.getItem("user"));
            let token = sessionStorage.getItem("token");
            let that = this;
            axios({
                headers: {
                "Content-Type": "application/json;charset=UTF-8",
                token: token,
                },
                method: "Post",
                url: "http://localhost:8081/user-admin/addStudentIntoClass",
                data: JSON.stringify({
                    operator: user.uid,
                    uid: that.student_add_uid,
                    classId:that.class_modify_id
                }),
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                    that.student_add_uid = null;
                    that.student_get_studentData(that.class_modify_id);
                } else {
                alert(result.data.msg);
                }
            });
        },
        btn_student_search(){
            this.student_get_studentData(this.class_modify_id);
        },
        btn_student_remove(){
            let user = JSON.parse(sessionStorage.getItem("user"));
            let token = sessionStorage.getItem("token");
            let that = this;
            axios({
                headers: {
                "Content-Type": "application/json;charset=UTF-8",
                token: token,
                },
                method: "Post",
                url: "http://localhost:8081/user-admin/removeStudentFromClass",
                data: JSON.stringify({
                    operator: user.uid,
                    uid: that.student_remove_uid,
                    classId:that.class_modify_id
                }),
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                    that.student_add_uid = null;
                    that.student_get_studentData(that.class_modify_id);
                } else {
                alert(result.data.msg);
                }
            });
        },
        input_studentUidValid(){
            let token = sessionStorage.getItem("token");
            axios({
                headers: {
                token: token,
                },
                method: "Get",
                url: "http://localhost:8081/Welcome/uidValid",
                params: {
                uid: this.student_add_uid,
                },
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                if (result.data.data === false) {
                    document.getElementById("uidSpan").style.display = "block";
                } else {
                    document.getElementById("uidSpan").style.display = "none";
                }
            }
        });
        },
        student_get_studentData(classId){
            let token = sessionStorage.getItem("token");
            let that = this;
            this.student_table_data=[]
            axios({
                headers: {
                token: token,
                },
                method: "Get",
                url: "http://localhost:8081/user-info/getStudentInfo",
                params:{
                classId:classId,
                uid:that.student_search_uid,
                userName:that.student_search_name,
                pageMax:999
                }
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                let x=1
                for(let i of result.data.data.data){
                    i.no = x++;
                }
                that.student_table_data = result.data.data.data;
                } else {
                alert(result.data.msg);
                }
            });
        },
    },
    mounted() {
        
    },
}
</script>

<style  scoped>
.main{
    position: relative;
    top: -20%;
    width: 100%;
    height: 100%;
}
</style>